<template>
    <view :style="{ '--color': color }">
        <u-popup :show="Contact" @close="close" mode="bottom" closeable round="10" :safeAreaInsetBottom="InsetBottom">
            <view class="popUp">
                <text class="black bold size32 m-top30">{{ articleInfo.articleSource }}</text>
                <view class="content">
                    <view class="headImg flexac">
                        <image :src="$imgUrls(matchmaker.headimg)" mode="aspectFill" class="Imgs"></image>
                    </view>
                    <text class="color size32">{{ matchmaker.name }}</text>
                    <view class="d-flex a-center m-top6" @click.stop="$pop.setClip(articleInfo.wechat_number)">
                        <text class="color_99 size28" selectable user-select>微信：{{ matchmaker.wechat_number }}</text>
                        <view class="iconfont icon-fuzhi size38 color_99 p-left10"></view>
                    </view>
                    <image :src="$imgUrls(matchmaker.qr_code)" show-menu-by-longpress mode="aspectFit" class="DownCode"></image>
                    <text class="color_33 size30 bold">长按识别二维码添加红娘微信</text>
                    <!-- #ifdef MP-WEIXIN -->
                    <view class="d-flex a-center m-top10" @click="$pop.saveImage($imgUrls(matchmaker.qr_code))">
                        <text class="color_99 size28">或保存图片到相册</text>
                        <view class="iconfont icon-xiazaidaoru color_99 size32 p-left10"></view>
                    </view>
                    <!-- #endif -->
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        name: 'Contact',
        props: {
            Contact: {
                type: Boolean,
                default: false
            },
            InsetBottom: {
                type: Boolean,
                default: true
            },
            matchmaker: {
                type: Object
            }
        },

        data() {
            return {};
        },
        methods: {
            close() {
                this.$emit('closePop');
            }
        },
        computed: {
            ...mapState(['color', 'articleInfo'])
        }
    };
</script>

<style lang="scss" scoped>
    .popUp {
        width: 100%;
        background-image: linear-gradient(to top, #ffffff 0%, #fbe7ea 100%);
        border-radius: 20rpx 20rpx 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .content {
        width: 660rpx;
        margin: 80rpx auto 10rpx auto;
        padding-top: 80rpx;
        padding-bottom: 20rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .headImg {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        position: absolute;
        top: -50rpx;
        left: 50%;
        background-color: var(--color);
        transform: translate(-50%, 0);
    }

    .Imgs {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
    }

    .DownCode {
        width: 420rpx;
        height: 440rpx;
    }
</style>
